<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta name="description" content="FastAPI Project - 一个现代化的Web应用框架">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>{% block title %}FastApi Project{% endblock %}</title>
        <link rel="icon" type="image/png" href="/static/favicon.png">
        <!-- 最新的 Bootstrap5 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
        <!-- 最新的 Bootstrap5 图标库 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
        <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

        <style>
            :root {
                /* 布局尺寸 */
                --sidebar-width: 250px;
                --header-height: 56px;
                --footer-height: 48px;
                --breadcrumb-height: 42px;
                
                /* 主题颜色 */
                --primary-color: #009485;
                --primary-hover-color: #007a6d;
                --primary-light-color: rgba(0, 148, 133, 0.1);
                
                /* 间距 */
                --spacing-sm: 0.5rem;
                --spacing-md: 1rem;
                --spacing-lg: 1.5rem;
                
                /* 圆角 */
                --border-radius: 4px;
                
                /* 过渡动画 */
                --transition-duration: 0.3s;
            }

            /* 全局样式 */
            body {
                min-height: 100vh;
                background-color: #f8f9fa;
            }

            /* 内容区域计算 */
            .content-wrapper {
                min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--breadcrumb-height));
                padding: var(--spacing-md);
            }

            /* 滚动条美化 */
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            ::-webkit-scrollbar-track {
                background: #f1f1f1;
            }

            ::-webkit-scrollbar-thumb {
                background: #888;
                border-radius: var(--border-radius);
            }

            ::-webkit-scrollbar-thumb:hover {
                background: #666;
            }
        </style>
    </head>

    <body>
        {% block body %}{% endblock %}
        
    </body>

</html>